<template>
<div class="app-root">
    <div></div>
	<div>
		<div  class="page-account page-forget-password page-step">
			<div>
				<div  class="section-header">
					<div  class="header-wrap">
						<a  class="logo" href="/"></a>
					</div>
				</div>
			</div>
			<div  class="content-wrap">
				<div  class="page-title">找回密码</div>
				<div  class="step-bar step-bar-3 step-2">
					<div  class="bg"></div>
					<span  class="item item-1">1. 找回密码方式</span>
					<span  class="item item-2 ">2. 账号验证</span>
					<span  class="item item-3 current">3. 重设密码</span>
				</div>
				<div  class="form-wrap" >
                   <div  class="item">
						<input  class="input-text ng-pristine ng-valid ng-touched" placeholder="请输入新密码" type="password" v-model="form.model.password">
						<p  class="error-tip" v-show="result.show1">{{result.message1}}</p>
                        <!---->
                   </div>
            
					<div  class="item">
						<input  class="input-text ng-untouched ng-pristine ng-valid" placeholder="请再次输入新密码" type="password" v-model="form.model.comfirepassword">
						<p  class="error-tip" v-show="result.show2">{{result.message2}}</p>
						<!---->
					</div>
                <button  class="btn-green btn-large" @click="submit">确认修改</button>
                </div>
			</div>
			
			
			
			<div  _nghost-c5="">
				<div _ngcontent-c5="" class="section-footer">
					<p _ngcontent-c5="">
						<span _ngcontent-c5="">德艺汇电子商务有限公司 版权所有 ©2011-2018</span>
						<a _ngcontent-c5="" href="http://gdcainfo.miitbeian.gov.cn/publish/query/indexFirst.action;jsessionid=207816A48E0BF7D36574D524C5B276EC" target="_blank">粤ICP备12056275号-13</a>
					</p>
				</div>
			</div>
		</div>
	</div>
</div>

</template>

<script>
	export default {
		data() {
			return {
				form: {
					model: {
						token:'',
						comfirepassword:'',
						password: ''
					},
					rules: {
						password: [{
								required: true,
								message: "密码不能为空",
								trigger: "blur"
							},
							{
								max: 12,
								message: "密码度不能大于12位",
								trigger: "blur"
							}
						],
						comfirepassword: [{
								required: true,
								message: "确认密码不能为空",
								trigger: "blur"
							},
							{
								max: 12,
								message: "确认密码长度不能大于12位",
								trigger: "blur"
							   }
						       ],
					       },
				},
				result: {
					show1: false,
					show2: false,
					message1: "",
					message2: ""
				}
				
			};
		},
		computed: {},
		mounted() {
			this.getUrlParam();
		},
		methods: {
			submit() {
				let password = this.form.model.password;
				let comfirepassword = this.form.model.comfirepassword;
				if(null == password || '' == password) {
					this.result.show1 = true;
					this.result.message1 = '密码不能为空';
					return;
				}
				if(null == comfirepassword || '' == comfirepassword) {
					this.result.show2 = true;
					this.result.message2 = '密码不能为空';
					return;
				}
				this.resetpassword();
			},
			/**
			 * 重置密码
			 */
			
			resetpassword() {
				const _this = this;
				let postData_ = this.form.model;
				console.log(postData_);
				if(this.form.model.password===this.form.model.comfirepassword){
				this.axios
					.post("/woauth/auth/resetpassword", postData_)
					.then(function(response) {
						let res = response.data;
						if(0 === res.meta.code) {
							_this.result.code = 0;
							_this.$Message.success("重置密码成功");
							window.location.href = "./login.html";
						} else {
							let message_ = res.meta.message;
							_this.result.message = message_;
							_this.$Message.warning("重置密码失败:" + message_);
						}
					});
			}else{
				_this.$Message.warning("密码输入不一致，请重新输入");
			}
			},
			/**
             * 获取地址栏参数
            */
		    getUrlParam: function () {
			
				var name,value;
				var str=location.href; //取得整个地址栏
				var num=str.indexOf("?");
				str=str.substr(num+1); //取得所有参数   stringvar.substr(start [, length ]
			
				var arr=str.split("&"); //各个参数放到数组里
				for(var i=0;i < arr.length;i++){
					num=arr[i].indexOf("=");
					if(num>0){
						name=arr[i].substring(0,num);
						if(name==='token'){
						value=arr[i].substr(num+1);
						this[name]=value;
						this.form.model.token = value;
						}
					}
				}
				} ,

			goBack() {
				window.location.href = "./login.html";
			}
		}
	};
</script>

<style>
.section-header {
    height: 90px;
    background-color: #F3F3F3;
    padding-top: 27px;
}
.section-header .header-wrap {
    display: block;
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
.section-header .header-wrap .logo {
    display: inline-block;
    height: 36px;
    width: 222px;
    background: url(../../assets/images/login1/icon-logo.png) no-repeat center left;
    background-size: contain;
    outline: none;
    text-align: left;
    cursor: pointer;
}
.page-account.page-step .content-wrap {
    height: calc((100vh - 90px - 110px));
    min-height: 440px;
    width: 1200px;
    margin: 0 auto;
}
.page-forget-password .content-wrap {
    min-height: 570px !important;
}
.page-account {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.page-account.page-step .content-wrap .page-title {
    height: 64px;
    line-height: 64px;
    border-bottom: 1px solid #D8D8D8;
    color: #333;
    font-size: 14px;
}
.page-account {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.page-account.page-step .content-wrap .step-bar {
    padding-top: 60px;
    position: relative;
}

.page-account {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.page-account.page-step .content-wrap .step-bar.step-bar-3.step-2 .bg {
    background: url(https://o8ci6tgz8.qnssl.com/jiguang-auth/20171117/assets/img/account/step-2.jpg) no-repeat center center;
}

.page-account.page-step .content-wrap .step-bar.step-bar-3 .bg {
    width: 789px;
}

.page-account.page-step .content-wrap .step-bar .bg {
    display: block;
    margin: 0 auto;
    height: 40px;
    background-size: contain !important;
}

.page-account {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.page-account.page-step .content-wrap .step-bar.step-bar-3 .item.item-1 {
    left: 285px;
}

.page-account.page-step .content-wrap .step-bar .item {
    position: absolute;
    font-size: 16px;
    line-height: 40px;
    color: #000000;
    top: 60px;
}

.page-account {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.page-account.page-step .content-wrap .step-bar.step-bar-3 .item.item-2 {
    left: 572px;
}

.page-account.page-step .content-wrap .step-bar .item.current {
    color: #2D9C8B;
}

.page-account.page-step .content-wrap .step-bar .item {
    position: absolute;
    font-size: 16px;
    line-height: 40px;
    color: #000000;
    top: 60px;
}

.page-account {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.page-account.page-step .content-wrap .step-bar.step-bar-3 .item.item-3 {
    left: 818px;
}

.page-account.page-step .content-wrap .step-bar .item {
    position: absolute;
    font-size: 16px;
    line-height: 40px;
    color: #000000;
    top: 60px;
}

.page-account {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.page-account.page-step .content-wrap .form-wrap {
    width: 360px;
    margin: 0 auto;
    padding-top: 40px;
    font-size: 14px;
}

.page-account {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.page-account.page-step .content-wrap .form-wrap .item {
    margin-bottom: 20px;
    position: relative;
}

.page-account {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.page-account .input-text {
    min-height: 40px;
    width: 100%;
    color: #333;
    font-size: 14px;
    border: 1px solid #EEEFF0;
    border-radius: 3px;
    font-family: Helvetica, "microsoft yahei", sans-serif;
    padding-left: 16px;
    outline: none;
}

.page-account {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.page-account.page-step .content-wrap .form-wrap .item .error-tip {
    position: absolute;
    top: 42px;
}

.page-account .error-tip {
    color: #FF657B;
    font-size: 12px;
    display: block;
}

.page-account {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.page-account.page-step .content-wrap .form-wrap .btn-green {
    margin-top: 20px;
    width: 360px;
    margin-bottom: 15px;
}

.page-account .btn-large {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
}

.page-account .btn-green {
    display: inline-block;
    outline: none;
    background-color: #00A690;
    color: white;
    width: 100%;
    cursor: pointer;
    border: none;
    border-radius: 3px;
    font-family: Helvetica, "microsoft yahei", sans-serif;
    text-align: center;
}
.section-footer {
    height: 110px;
    background-color: #F3F3F3;
    text-align: center;
    line-height: 110px;
}
.section-footer {
    font-size: 14px;
    color: #A6A6A6;
}
.section-footer {
    font-size: 14px;
    color: #A6A6A6;
}
.section-footer {
    font-size: 14px;
    color: #A6A6A6;
}
element.style {
}

.page-account.page-step .content-wrap .form-wrap .btn-green {
    margin-top: 20px;
    width: 360px;
    margin-bottom: 15px;
}

.page-account .btn-large {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
}

.page-account .btn-green {
    display: inline-block;
    outline: none;
    background-color: #00A690;
    color: white;
    width: 100%;
    cursor: pointer;
    border: none;
    border-radius: 3px;
    font-family: Helvetica, "microsoft yahei", sans-serif;
    text-align: center;
}

.page-account * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

button, button:focus, button:active {
    outline: none;
}
.page-account.page-step .content-wrap .step-bar.step-bar-3 .item.item-3 {
    left: 818px;
}

.page-account.page-step .content-wrap .step-bar .item.current {
    color: #2D9C8B;
}

.page-account.page-step .content-wrap .step-bar .item {
    position: absolute;
    font-size: 16px;
    line-height: 40px;
    color: #000000;
    top: 60px;
}

.page-account * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    margin: 0px;
    padding: 0px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
</style>